<template>
  <el-dialog
    top="5vh"
    width="700px"
    title="添加/编辑"
    :visible.sync="dialogValue"
    :close-on-click-modal="false"
    append-to-body
  >
    <SubmitForm
      v-if="dialogValue"
      :rule-form="ruleForm"
      :rules="rules"
      :form-list="formList"
      @change="handleFormChange"
      @save="onSave"
      @close="dialogValue = false"
    >
      <template #map>
        <el-button type="primary" @click="openMap">地图选择</el-button>
      </template>
    </SubmitForm>

    <MapSelector @save="handleLocationSave" ref="mapSelector" />
  </el-dialog>
</template>

<script>
import { http } from '@/api'
import MapSelector from './map'
export default {
  name: 'FormAdd',
  components: {
    MapSelector
  },
  data() {
    return {
      apiKey: 'plot',
      dialogValue: false,
      ruleForm: {
      },
      defaultForm: {
        id: undefined,
        plotName: '',
        plotCode: '',
        chargePerson: '',
        personPhone: '',
        servicePhone: '',
        openingStart: '',
        openingEnd: '',
        address: '',
        lng: '',
        lat: '',
        province: '',
        city: '',
        district: '',
        enabled: 1
      },
      rules: {
        plotName: [{ required: true, message: '不能为空' }],
        plotCode: [{ required: true, message: '不能为空' }],
        chargePerson: [{ required: true, message: '不能为空' }],
        personPhone: [{ required: true, message: '不能为空' }],
        servicePhone: [{ required: true, message: '不能为空' }],
        openingStart: [{ required: true, message: '不能为空' }],
        openingEnd: [{ required: true, message: '不能为空' }],
        address: [{ required: true, message: '不能为空' }],
        lng: [{ required: true, message: '不能为空' }],
        lat: [{ required: true, message: '不能为空' }],
        province: [{ required: true, message: '不能为空' }],
        city: [{ required: true, message: '不能为空' }],
        district: [{ required: true, message: '不能为空' }],
      },
      formList: [
        {
          prop: 'plotName',
          label: '站点名称',
          name: 'input',
          clearable: true,
          colSpan: 8
        },
        {
          prop: 'plotCode',
          label: '站点编号',
          name: 'input',
          clearable: true,
          colSpan: 8
        },
        {
          prop: 'chargePerson',
          label: '负责人',
          name: 'input',
          clearable: true,
          colSpan: 8
        },
        {
          prop: 'personPhone',
          label: '联系方式',
          name: 'input',
          clearable: true,
          colSpan: 8
        },
        {
          prop: 'servicePhone',
          label: '热线电话',
          name: 'input',
          clearable: true,
          colSpan: 8
        },
        {
          prop: 'openingStart',
          label: '营业开始时间',
          name: 'time',
          clearable: true,
          colSpan: 8
        },
        {
          prop: 'openingEnd',
          label: '营业结束时间',
          name: 'time',
          clearable: true,
          colSpan: 8
        },
        {
          prop: 'remark',
          label: '备注',
          name: 'input',
          type: 'textarea',
          rows: 2,
          colSpan: 16
        },
        {
          prop: 'filePath',
          label: '封面',
          name: 'file',
          colSpan: 12
        },
        {
          prop: 'filePathAll',
          label: '轮播',
          name: 'file',
          colSpan: 12,
          multiple: true,
        },
        // {
        //   prop: 'enabled',
        //   label: '状态',
        //   name: 'radio',
        //   options: [
        //     {
        //       label: '启用',
        //       value: 1
        //     },
        //     {
        //       label: '停用',
        //       value: 0
        //     }
        //   ],
        //   colSpan: 8
        // },
        {
          label: '选择定位',
          name: 'title',
        },
        {
          prop: 'map',
          label: '',
          slot: true,
          colSpan: 24
        },
        {
          prop: 'province',
          label: '省',
          name: 'input',
          clearable: true,
          colSpan: 8
        },
        {
          prop: 'city',
          label: '市',
          name: 'input',
          clearable: true,
          colSpan: 8
        },
        {
          prop: 'district',
          label: '区',
          name: 'input',
          clearable: true,
          colSpan: 8
        },

        {
          prop: 'lng',
          label: '经度',
          name: 'input',
          clearable: true,
          disabled: true,
          colSpan: 8
        },
        {
          prop: 'lat',
          label: '纬度',
          name: 'input',
          clearable: true,
          disabled: true,
          colSpan: 8
        },
        {
          prop: 'address',
          label: '详细地址',
          name: 'input',
          type: 'textarea',
          colSpan: 24
        },
      ]
    }
  },
  methods: {
    handleFormChange({ key, val }) {

    },
    open(row) {
      console.log('row',row)
      this.dialogValue = true
      if (row) {
        http[this.apiKey].read(row.id).then(res => {
          this.ruleForm = {
            ...res.data
          }
        })
      } else {
        this.ruleForm = {
          ...this.defaultForm
        }
      }
    },
    onSave() {
      http[this.apiKey][this.ruleForm.id ? 'update' : 'create'](this.ruleForm.id, { ...this.ruleForm }).then(res => {
        this.$message.success('操作成功')
        this.dialogValue = false
        this.$emit('get-page')
      })
    },
    openMap() {
      // 如果已有经纬度，传入现有位置信息
      const location = this.ruleForm.lat && this.ruleForm.lng ? {
        lat: this.ruleForm.lat,
        lng: this.ruleForm.lng,
        formatted_address: this.ruleForm.address,
        province: this.ruleForm.province,
        city: this.ruleForm.city,
        district: this.ruleForm.district
      } : null;
      this.$refs.mapSelector.open(location)
    },
    handleLocationSave(locationData) {
      this.ruleForm.lat = locationData.lat
      this.ruleForm.lng = locationData.lng
      this.ruleForm.address = locationData.formatted_address
      // 省市区
      this.ruleForm.province = locationData.province
      this.ruleForm.city = locationData.city
      this.ruleForm.district = locationData.district
    }
  }
}
</script>

<style scoped lang="scss">
</style>
